<template lang="pug">
  .school-search-wrap
    g-box(title="查询")
      .box-content(slot="content")
        el-row(:gutter="20")
          el-col(:span="8")
            el-row
              el-col(:span="8") 所在地区：
              el-col(:span="16")
                el-select(v-model="province")
                  el-option(v-for="item in provinceList", :label="item.name", :key="item.value", :value="item.value")
          el-col(:span="8")
            el-row
              el-col(:span="8") 学校名称：
              el-col(:span="16")
                el-input(v-model="cname")
        el-row.btn-wrap
          el-button(type="primary", @click="index") 查询
    .content-list
      el-table(:data="schoolList", border, style="width=100%")
        el-table-column(label="省份-市", align="center")
          template(slot-scope="scope")
            p {{scope.row.province}}-{{scope.row.city}}
        el-table-column(label="学校名称", align="center", prop="cname")
        el-table-column(label="学段", align="center", prop="period")
        el-table-column(label="学生开通数量（剩余）", align="center")
          template(slot-scope="scope")
            p {{scope.row.number}}({{scope.row.lasttimes}})
        el-table-column(label="有效期", align="center")
          template(slot-scope="scope")
            p {{scope.row.starttime}}-{{scope.row.endtime}}
        el-table-column(label="首次开通时间", align="center", prop="opentime")
        el-table-column(label="操作", align="center")
          template(slot-scope="scope")
            router-link(:to="'/school/open/'+scope.row.id")
              el-button(type="text", size="small")  修改
            el-button(type="text", size="small", @click="modifyStatus(scope.$index, scope.row)", :class="[scope.row.status ? 'start-using' : 'disabled']")  {{scope.row.status ? '启用' : '禁用'}}
    el-pagination.g-pagination(background, layout="prev, pager, next", @current-change="change" :total="total")
</template>

<script>
import GBox from '../../components/gBox.vue'
import mapStateModel from '../../utils/mapStateModel'
import { mapActions, mapState, mapMutations } from "vuex"
export default {
  computed: {
    ...mapStateModel(["cname", "province", "pageNum"], 'setSearch', "school", "search"),
    ...mapState('school', {
      schoolList: state => state.schoolList,
      total: state => state.total,
      provinceList: state => state.provinceList
    })
  },
  mounted () {
    this.getProvince();
    this.index();
  },
  methods: {
    ...mapActions('school', [
      "index", "getProvince", "edit"
    ]),
    // 翻页
    change (val) {
      this.pageNum = val;
      this.index();
    },
    // 修改状态
    modifyStatus (index, item) {
      item.index = index;
      this.edit(item);
    }
  },
  components: {
    GBox
  }
}
</script>

<style lang="stylus">
.school-search-wrap
  .el-row
    padding-left 10px
    .el-col
      line-height 36px
      margin-bottom 10px
    &.btn-wrap
      text-align center
  .start-using
    color #67C23A
  .disabled
    color #F56C6C
</style>
